import React, { useState, useEffect, useRef, FC } from 'react';
import { request } from 'umi';
import { Card, Button, message } from 'antd';
import { ColumnsType } from 'antd/es/table';
import { IUser } from './data.d';
import UserList from './components/UserList/UserList';
import UserModal from './components/UserModal';
import useIntervalRequest from './utils';
import ChartContainer from './chartContainer';
import TestA from './test';
import { Divider } from 'rc-menu';
const User: FC = () => {
  const userModalRef: any = useRef();

  // 显示弹窗
  const showUserModal = () => {
    console.log(userModalRef.current);
    userModalRef.current.onShowModal();
  };

  const [userList, setUserList] = useState<IUser | undefined>(undefined);
  const [paginationParams, setPaginationParams] = useState({
    page: 1,
    pageSize: 10,
  });
  const [total, setTotal] = useState(0);

  // const params = {
  //   noteCode: '123456',
  //   delay: 1000
  // }
  // const {result,loading} = useIntervalRequest(params)
  // console.log(result,loading)
  // const params1 = {
  //   noteCode: '123456',
  // }
  // const {result,loading} = useIntervalRequest(params1)
  // console.log(result,loading)

  useEffect(() => {
    sessionStorage.setItem('api', '1234567890');
   
    handleReqUserList();
  }, [paginationParams]);

  const handleReqUserList = () => {
    // setLoading(true);
    request('/api/user/list', {
      params: {
        page: paginationParams.page,
        pageSize: paginationParams.pageSize,
      },
    }).then((res) => {
      if (res.err_code === 0) {
        // setLoading(false);
        setUserList(res.data.userList);
        setTotal(res.data.total);
      }
      console.log(res);
    });
  };
  // 分页
  const handlePageChange = (pageNo: number) => {
    console.log(pageNo);
    if (pageNo !== paginationParams.page) {
      setPaginationParams({
        ...paginationParams,
        page: pageNo,
      });
    }
  };

  // 添加/编辑用户
  const onOk = (data: any, id?: string) => {
    request(`/api/user/${!id ? 'add' : 'edit'}`, {
      method: 'post',
      data: !id ? data : { ...data, id },
    }).then((res) => {
      if (res.err_code === 0) {
        message.success(!id ? '添加成功' : '编辑成功');
        userModalRef.current.onCancel();
        setPaginationParams({ page: 1, pageSize: 10 });
      } else {
        message.warning(res.msg);
      }
    });
    console.log('编辑');
  };
  // 编辑
  const handleEdit = (record: any) => {
    userModalRef.current.onShowModal(record);
  };
  // 删除
  const handleDel = (record: any) => {
    console.log(record);
    request('/api/user/del', {
      params: {
        id: record.id,
      },
    }).then((res) => {
      if (res.err_code === 0) {
        message.success('删除成功');
        handleReqUserList();
      } else {
        message.warning(res.msg);
      }
      console.log(res);
    });
  };

  

  return (
    <div>
      <Card>
       <ChartContainer noteCode={'12345'} >
          <TestA />
       </ChartContainer>
        <Button type={'primary'} size={'middle'} onClick={showUserModal}>
          添加用户
        </Button>
        <UserList
          data={userList}
          // loading={loading}
          pagination={{
            current: paginationParams.page,
            total: total,
            onChange: handlePageChange,
          }}
          onEditUser={handleEdit}
          onDeleteUser={handleDel}
        ></UserList>
        {/* <UserModal cRef={userModalRef} loading={loading} onOk={onOk}></UserModal> */}
        <UserModal ref={userModalRef} onOk={onOk}></UserModal>
      </Card>
    </div>
  );
};

export default User;
